<!-- @ok="handleSubmit" -->
<template>
  <BasicModal v-bind="$attrs" @register="register" showFooter :title="getTitle" width="50%">
    <div style="overflow: hidden; width: 100%; height: 500px">
      <VxeBasicTable ref="tableRef" v-bind="gridOptions" :data="dataList">
        <template #toolbar_buttons> </template>
        <template #action="{ row }">
          <TableAction outside :actions="getActions(row)" />
        </template>
      </VxeBasicTable>

      <monthFormModal @register="monthModal[0]" />
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, computed, unref, reactive } from 'vue';
  import { formSchema, yearColumns } from './role.data';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicTable, useTable, TableAction } from '@/components/Table';

  import { BasicTree, TreeItem } from '@/components/Tree';
  import { userYearCountListApi } from '@/api/sys/user';
  import { useModal } from '@/components/Modal';

  import {
    BasicTableProps,
    VxeBasicTable,
    VxeGridInstance,
    VxeGridListeners,
    VxeTableDefines,
  } from '@/components/VxeTable';
  import { useMessage } from '@/hooks/web/useMessage';
  import monthFormModal from './monthFormModal.vue';

  const emit = defineEmits(['success', 'register']);
  const isUpdate = ref(true);
  const monthModal = useModal();
  const { createMessage } = useMessage();

  const userId = ref('');

  const tableRef = ref();
  const dataList = ref([]);

  const gridOptions = reactive<BasicTableProps>({
    id: 'VxeTable',
    keepSource: true,
    editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
    showOverflow: true,
    size: 'mini',
    height: 'auto',
    columns: yearColumns,
    // filterConfig: {
    //   remote: true,
    // },
    toolbarConfig: {
      slots: {
        buttons: 'toolbar_buttons',
      },
    },
    formConfig: {
      enabled: true,
      items: formSchema,
    },
    pagerConfig: {
      pageSize: 20,
    },
    proxyConfig: {
      enabled: false,
    },
  });

  const query = ref({});
  const getTitle = ref('累计时长统计');
  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //打开弹层后的回调
    setModalProps({ confirmLoading: false });

    console.log('---data.record:', data.record);
    getTitle.value = data.record.userName + '累计时长统计';
    query.value = data.record;
    userId.value = data.record.userId;
    // let form = {
    //   userId: userId.value,
    // };
    // let pag = {
    //   currentPage: 1,
    //   pageSize: 20,
    // };
    userYearCountListApi({
      page: 1,
      pageSize: 50,
      userId: userId.value,
    }).then((res) => {
      dataList.value = res.data.list;
    });
  });

  function getActions(record) {
    let arr = [
      {
        // icon: 'clarity:note-edit-line',
        label: '查看明细',
        onClick: handleEdit.bind(null, record),
      },
    ];
    return arr;
  }

  function handleEdit(record) {
    let json = { ...query.value };
    json.year = record.date;
    monthModal[1].openModal(true, json);
  }
</script>
